<template>
  <a-row type="flex" justify="space-between">
    <a-icon
        class="trigger"
        :type="collapsedActived ? 'menu-unfold' : 'menu-fold'"
        @click="changeCollapsed()" />
    <div style="cursor: pointer; padding: 0 24px; display: inline-block; transition: all .3s; ">
      <a-dropdown>
        <a-button type="primary">
          欢迎您, {{ nickname() }}
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item key="0" @click="updatePassword">
            <a-icon type="setting" />
            <span>修改密码</span>
          </a-menu-item>
          <a-menu-item key="1" @click="handleLogout">
            <a-icon type="logout" />
            <span>退出登录</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <user-update-password ref="userUpdatePassword" v-if="userUpdatePasswordVisible"></user-update-password>
  </a-row>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import UserUpdatePassword from '@/views/modules/sys/model/user-update-password'

export default {
  name: 'main-header',
  components: {
    UserUpdatePassword
  },
  props: {
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  data () {
    return {
      collapsedActived: this.collapsed,
      userUpdatePasswordVisible: false,
    }
  },
  watch: {
    collapsed (val) {
      this.collapsedActived = val;//新增collapsed的watch，监听变更并同步到collapsedActived上
    }
  },
  methods: {
    ...mapActions(["Logout"]),
    ...mapGetters(["nickname"]),
    changeCollapsed () {
      this.collapsedActived = !this.collapsedActived
      this.$emit('update:collapsed', this.collapsedActived) // 触发update:data将子组件值传递给父组件
    },
    updatePassword () {
      this.userUpdatePasswordVisible = true
      this.$nextTick(() => {
        this.$refs.userUpdatePassword.init()
      })
    },
    handleLogout () {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that.Logout({}).then(() => {
            // update-begin author:scott date:20211223 for:【JTC-198】退出登录体验不好
            //that.$router.push({ path: '/user/login' });
            window.location.reload()
            // update-end author:scott date:20211223 for:【JTC-198】退出登录体验不好
          }).catch(err => {
            that.$message.error('错误')
          })
        },
        onCancel() {
        },
      });
    }
  }
}
</script>

<style lang="less" scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>
